<template>
  <BaseForm v-model="formDataModel" @close="$emit('callBack')" />

</template>

<script lang="tsx" setup>
import type { FormInstance } from 'element-plus'
import DrillInfoApi from '/@/api/webPath/DrillInfoApi.ts';
import { translate } from "/@/i18n";
import FORM_FIELD_TYPE from "/@/constants/FormFieldType.ts";
import { useSysDicList } from '~/src/utils/useSysDicList';
import CompanyInfoApi from '~/src/api/CompanyInfoApi';
import SysDataApi from '~/src/api/webPath/sysDataApi';
defineOptions({
  name: 'DrillInfoEdit',
})
const props = defineProps({
  modelValue: {

  }
})
const emit = defineEmits(['fetch-data', 'callBack'])
// const typeList = useSysDicList("drill_type")
const typeList = ref([])



const formRef = ref<FormInstance>();
const title = ref<string>('');
const dialogFormVisible = ref<boolean>(false);
const companyList = ref([])
onMounted(async () => {
  selectTypeList()
  const res = await SysDataApi.getPageData({ type: "drill_type" });
  res && (typeList.value = res.data.map(x=>({label: x.name, value: x.id})))
  const data = (await CompanyInfoApi.getPageData({})).data.records
  companyList.value = data.map(x => ({ value: x.no, label: x.name }))
})

const selectList = ref([])
function selectTypeList() {
  DrillInfoApi.selectTypeList().then(res => {
    console.log(1111111111111111, res.data);
    selectList.value = res.data.map(item => ({ label: item.name, value: item.name }))
    console.log("canCiTypeList1111111", selectList.value)
  })
}


const formDataModel = ref({
  columnCount: 2,
  expandLimit: 6,
  autoFit: false,
  columnWidth: '300px',
  labelPosition: 'right',
  labelWidth: '150px',
  modelData: {},  //表单参数值 初始化
  callback: async (any: object) => {  //表单执行成功后回调
    //完成数据提交
    const { message } = await DrillInfoApi.save(any)
    $baseMessage(message, 'success', 'vab-hey-message-success');
    dialogFormVisible.value = false


    //事件及数据推送到上一层父类
    emit('callBack', any); //把表单数据推送到上一层
  },
  items: [  //表单item数据初始化
    {
      label: "培训名称",
      field: "drillName",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入培训名称"
        }
      ]

    },
    {
      label: "主办方",
      field: "drillSponsor",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: selectList,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入主办方"
        }
      ]

    },
    {
      label: "协办方",
      field: "drillAssist",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: selectList,
      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入协办方"
        }
      ]

    },
    {
      label: "所属区域",
      field: "areaId",
      clearable: true,
      // type: FORM_FIELD_TYPE.INPUT,
      render() {
        return <CitySelect />
      },

      placeholder: "请输入",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    //   {
    //     label: "所属区域",
    //     field: "area",
    //     hide: true,
    //     clearable: true,
    //     type: FORM_FIELD_TYPE.INPUT,

    //    placeholder:"请输入",

    //    rule:{
    //      trigger: 'blur',
    //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //            callback();
    //        },
    //      },

    // },
    {
      label: "培训类型",
      field: "type",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: typeList,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请选择培训类型"
        }
      ]

    },
    {
      label: "是否考试",
      field: "isExam",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: [
        {
          value: 1,
          label: "否"
        },
        {
          value: 0,
          label: "是"
        }
      ],

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请选择是否考试"
        }
      ]

    },
    {
      label: "开始时间",
      field: "startTime",
      clearable: true,
      type: FORM_FIELD_TYPE.DATETIME,
      placeholder: "请输入",
      callback: (handlers, row, value)=>{
        const currentDrillName = row["drillName"]
        if (currentDrillName) {
          let drillName = currentDrillName 
          if (currentDrillName.includes("-")) {
            drillName = currentDrillName.split("-")[0]
          }
          const currentDate = new Date(value)
          handlers.updateParam("drillName",`${drillName}-${currentDate.getFullYear()}年${(currentDate.getMonth() + 1).toString().padStart(2,'0')}月${currentDate.getDate().toString().padStart(2,'0')}日`)
        }
      },
      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请选择开始时间"
        }
      ],

      config: {
        props: {   //日期精度配置
          type: "daterange",
          startPlaceholder: "开始日期",
          endPlaceholder: "结束日期",
          format: "YYYY-MM-DD",
        }
      },
    },
    {
      label: "结束时间",
      field: "endTime",
      clearable: true,
      type: FORM_FIELD_TYPE.DATETIME,
      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请选择结束时间"
        }
      ],
      config: {
        props: {   //日期精度配置
          type: "daterange",
          startPlaceholder: "开始日期",
          endPlaceholder: "结束日期",
          format: "YYYY-MM-DD",
        }
      },
    },
    {
      label: "是否收费",
      field: "isCharge",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      defaultValue: 1,
      options: [
        {
          value: 1,
          label: "否"
        },
        {
          value: 0,
          label: "是"
        }
      ],


      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请选择是否收费"
        }
      ]

    },
    {
      label: "收费金额",
      field: "price",
      clearable: true,
      isShow: (row) => {
        return row["isCharge"] === undefined || row["isCharge"] === 0
      },
      type: FORM_FIELD_TYPE.INPUTNUMBER,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入收费金额"
        }
      ]

    },
    {
      label: "联系人1",
      field: "contactsOne",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入联系人"
        }
      ]

    },
    {
      label: "联系电话1",
      field: "contactsOnePhone",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入联系电话"
        }
      ]


    },
    {
      label: "联系人2",
      field: "contactsTwo",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入联系2"
        }
      ]

    },
    {
      label: "联系电话2",
      field: "contactsTwoPhone",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入联系2电话"
        }
      ]

    },
    {
      label: "培训举办地址",
      field: "address",
      clearable: true,
      expandColumn: true,
      type: FORM_FIELD_TYPE.TEXTAREA,

      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入举办地址"
        }
      ]

    },
    {
      label: "是否上传身份证",
      field: "isIdentityCard",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: [
        {
          value: 1,
          label: "否"
        },
        {
          value: 0,
          label: "是"
        }
      ],


      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入是否上传身份证"
        }
      ]

    },
    //   {
    //     label: "身份证地址",
    //     field: "identityCardUrl",
    //     clearable: true,
    //     type: FORM_FIELD_TYPE.INPUT,

    //    placeholder:"请输入",

    //    rule:{
    //      trigger: 'blur',
    //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //            callback();
    //        },
    //      },

    // },
    {
      label: "是否上传照片",
      field: "isImage",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      options: [
        {
          value: 1,
          label: "否"
        },
        {
          value: 0,
          label: "是"
        }
      ],


      placeholder: "请输入",

      rule: [
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {  //绑定验证
            callback();
          },
        },
        {
          required: true,
          message: "请输入是否上传照片"
        }
      ]

    },
    //   {
    //     label: "照片地址",
    //     field: "imageUrl",
    //     clearable: true,
    //     type: FORM_FIELD_TYPE.INPUT,

    //    placeholder:"请输入",

    //    rule:{
    //      trigger: 'blur',
    //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //            callback();
    //        },
    //      },

    // },
    // {
    //   label: "报名结束时间",
    //   field: "signEndTime",
    //   clearable: true,
    //   type: FORM_FIELD_TYPE.DATETIME,
    //   placeholder: "请输入",

    //   rule: [
    //     {
    //       trigger: 'blur',
    //       validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //         callback();
    //       },
    //     },
    //     {
    //       required: true,
    //       message: "请选择报名结束时间"
    //     }
    //   ],


    //   config: {
    //     props: {   //日期精度配置
    //       type: "daterange",
    //       startPlaceholder: "开始日期",
    //       endPlaceholder: "结束日期",
    //       format: "YYYY-MM-DD",
    //     }
    //   },
    // },
    {
      label: "培训议程",
      field: "drillAgenda",
      clearable: true,
      expandColumn: true,
      type: FORM_FIELD_TYPE.TEXTAREA,
      props: {
        rows: 5
      },

      placeholder: "最前端不要留空格",

      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {  //绑定验证
          callback();
        },
      },

    },
    // {
    //   label: "证书抬头",
    //   field: "certificateHeader",
    //   clearable: true,
    //   type: FORM_FIELD_TYPE.INPUT,

    //   placeholder: "请输入",

    //   rule: {
    //     trigger: 'blur',
    //     validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //       callback();
    //     },
    //   },

    // },
    //   {
    //     label: "证书日期",
    //     field: "certificateDate",
    //     clearable: true,
    //     type: FORM_FIELD_TYPE.DATE,
    //    placeholder:"请输入",

    //    rule:{
    //      trigger: 'blur',
    //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //            callback();
    //        },
    //      },

    // config: {
    //     props: {   //日期精度配置
    //          type: "daterange",
    //         startPlaceholder: "开始日期",
    //         endPlaceholder: "结束日期",
    //         format: "YYYY-MM-DD",
    //           }
    //    },
    // },
    //   {
    //     label: "证书内容文字模板",
    //     field: "certificateContentTemplate",
    //     clearable: true,
    //     expandColumn: true,
    //     type: FORM_FIELD_TYPE.TEXTAREA,
    //     props: {
    //       rows: 5 
    //     },
    //     placeholder:"请输入",

    //     rule:{
    //       trigger: 'blur',
    //       validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //             callback();
    //         },
    //       },

    // },
    // {
    //   label: "证书模板文件pdf",
    //   field: "certificateTemplate",
    //   expandColumn: true,
    //   type: FORM_FIELD_TYPE.UPLOAD,
    //   config: {
    //     type: "file"
    //   }
    // },
    // {
    //   label: "印章",
    //   field: "sealImg",
    //   expandColumn: true,
    //   type: FORM_FIELD_TYPE.UPLOAD,
    // }
    //   {
    //     label: "创建人",
    //     field: "creator",
    //     clearable: true,
    //     type: FORM_FIELD_TYPE.INPUT,

    //    placeholder:"请输入",

    //    rule:{
    //      trigger: 'blur',
    //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //            callback();
    //        },
    //      },

    // },
    //   {
    //     label: "修改人",
    //     field: "reviser",
    //     clearable: true,
    //     type: FORM_FIELD_TYPE.INPUT,

    //    placeholder:"请输入",

    //    rule:{
    //      trigger: 'blur',
    //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //            callback();
    //        },
    //      },

    // },
    //   {
    //     label: "排序",
    //     field: "sort",
    //     clearable: true,
    //     type: FORM_FIELD_TYPE.INPUT,

    //    placeholder:"请输入",

    //    rule:{
    //      trigger: 'blur',
    //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
    //            callback();
    //        },
    //      },

    // },

  ],
})






//页面数据加载
onMounted(async () => {

  //初始化数据model
  if (props.modelValue.query) { //跳转过来时候有参数
    if (props.modelValue.query.drillInfoId) {  //id存在则为编辑，加载网络数据，如上级页面带参数手动覆盖

      const { data } = await DrillInfoApi.getDetail({
        drillInfoId: props.modelValue.query.drillInfoId   //从路由中获取参数
      })
      formDataModel.value.modelData = data;
    } else {
      //新增时候则用父类页面传参默认填充可根据业务修改
      for (const key in props.modelValue.query) {
        formDataModel.value.modelData[key] = props.modelValue.query[key]
      }
    }
  }
})


//方法暴露区域  todo
defineExpose({

})

</script>
